<template>
	<div
		:style="{
			'grid-template-columns': `repeat(${column},1fr)`
		}"
		class='commodities'
	>
		<div
			class="item"
			v-for="item in communityToys.filter(item => item.type === type)"
			:key="item.id"
			@click="$pushTo('ExchangeDetail',{id: item.id})"
		>
			<img :src="item.img">
			<div class="name">
				<span>{{item.name}}</span>
			</div>
		</div>
	</div>
</template>

<script>
import communityToys from '@/mock/community'
export default {
  props: {
    column: {
      type: Number,
      default: 4
    },
    type: {
      type: String,
      default: 'donate'
    }
  },
  data() {
    return {
      communityToys
    }
  },
}
</script>

<style lang='scss' scoped>
.commodities {
  display: grid;
  grid-gap: 30px;

  .item {
    cursor: pointer;

    img {
      width: 100%;
    }

    .name {
      display: flex;
      margin-top: 20px;
      color: $color1;

      span {
        flex: 1;
      }

      i {
        cursor: pointer;
      }
    }
  }
}
</style>
